<template>
	<!-- 商品详情页面 -->
	<view class="nft_container_bg">
		<view class="nft_detail">
			<!-- 展示 -->
			<view class="display_card">
				<!-- 标题 -->
				<view class="display_card_title">{{nftDetailsInfo.themeName || nftDetailsInfo.name}}</view>
				<!-- 展示物品 -->
				<view class="display_card_product">
					<image :src="nftDetailsInfo.metadataImage"></image>
				</view>
				<!-- 台子 -->
				<view class="display_card_tai">
					<image src="../../static/img/nft/tai.png" mode=""></image>
				</view>
				<view class="display_card_sign">
				</view>
			</view>
			<view class="nft_detail_content">
				<view class="info_person">
					<!-- 持有者 -->
					<view class="holders" @tap="toNftSpace">
						<view>持有者</view>
						<view class="holders_photo">
							<image src="../../static/img/logo.png" mode=""></image>
						</view>
					</view>
					<!-- 创造者 -->
					<view class="owner">
						<view>创造者</view>
						<view class="owner_photo">
							<image src="../../static/img/logo.png" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 基本信息 -->
				<view class="info_basis">
					<view class="">
						<view class="">权益属性</view>
						<view class="">版权品</view>
					</view>
					<view class="">
						<view class="">系列</view>
						<view class="">无系列</view>
					</view>
				</view>
				<!-- 认证信息 -->
				<view class="info_approve">
					<title-component titleName="认证信息" bacg="var(--echo-nft-card-bg-color)" titleColor="#fff">
					</title-component>
					<view class="info_approve_content">
						<view class="">
							<view class="">合约地址</view>
							<view class="info_approve_contract">
								<span class="info">
									{{contract.contract}}
								</span>
								<span class="icon" @click="copyContract">
									<image style="width: 20px;height: 20px;" src="../../static/img/nft/copy.png"></image>
								</span>
							</view>
						</view>
						<view class="">
							<view class="">认证网络</view>
							<view class="">Conflux</view>
						</view>
						<view class="">
							<view class="">认证标准</view>
							<view class="">{{contractTemplate.type}}</view>
						</view>
						<view class="">
							<view class="">tokenId</view>
							<view class="">{{themeMint.tokenId}}</view>
						</view>
						<view class="">
							<view class="">交易哈希</view>
							<view class="info_approve_contract">
								<span class="info">
									{{themeMint.txHash}}
								</span>
								<span class="icon" @click="copyTxHash">
									<image style="width: 20px;height: 20px;" src="../../static/img/nft/copy.png"></image>
								</span>
							</view>
						</view>
						<view class="">
							<view class="">元数据地址</view>
							<view class="info_approve_contract">
								<span class="info">
									{{themeMint.metadataUrl}}
								</span>
								<span class="icon" @click="copyMetadataUrl">
									<image style="width: 20px;height: 20px;" src="../../static/img/nft/copy.png"></image>
								</span>
							</view>
						</view>
					</view>
				</view>

				<!-- 产品介绍 -->
				<view class="info_product">
					<title-component titleName="详情" bacg="var(--echo-nft-card-bg-color)" titleColor="#fff">
					</title-component>
					<view class="info_product_content">
						{{nftDetailsInfo.description}}
					</view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="bottom_btn_card" v-if="exhibitionType === 'NFT'">
				<view class="bottom_btn_card_left" @click="canvasImage.toShare">
					<u-icon name="share" size="30" color="#fff"></u-icon>
					<view class="">炫耀</view>
				</view>
				<view class="">
					<u-button text="转让" color="var(--echo-main-color)" @tap="toTransfer" class="bottom_btn"></u-button>
				</view>
			</view>
			<!-- 分享 身份 -->
			<view class="buy_bar" v-if="exhibitionType == 'identity'">
				<u-button type="primary" text="炫耀" color="var(--echo-main-color)" shape="circle"
					@click="canvasImage.toShare">
				</u-button>
			</view>
		</view>
		<!-- 分享弹出框 -->
		<u-modal :show="isShareBoxShow" closeOnClickOverlay @close="closeShareBox" negativeTop="60rpx"
			:showConfirmButton="false">
			<img class="saveImage" :src="posterUrl" alt="" @load="_hideLoading" />
		</u-modal>
		<share-card id="pagePoster" :urlQrcode="urlQrcode" :nftDetailsInfo="nftDetailsInfo"
			style="position:absolute;z-index: -999; top: 0;">
		</share-card>
		<!-- 转让弹出层 -->
		<u-popup :show="transferShow" @close="closeTransferShow" @open="openTransferShow" mode="center" :round="10">
			<view class="transfer">
				<u--input placeholder="请输入账户" border="surround" suffixIcon="account-fill"
					suffixIconStyle="color: #909399;font-size: 24px" v-model="toCustomerNo">
					<u--text text="目标账户" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
				</u--input>
				<view class="transfer_tips">资金将实时到账,请确定好再转让</view>
				<view class="transfer_btn">
					<u-button text="转让" color="var(--echo-main-color)" @tap="confirmTransfer"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script lang="renderjs" module="canvasImage">
	import html2canvas from 'html2canvas'
	import {
		getMyNft,
		giveAway,
		getPositionDetails
	} from '@/config/nftApi.js';
	export default {
		data() {
			return {
				// 产品信息
				nftDetailsInfo: {},
				// 相关配置信息
				contract: {},
				// Mint信息
				themeMint: {},
				// 产品编号
				serialNo: '',
				// 分享模态框
				isShareBoxShow: false,
				// 控制转让框
				transferShow: false,
				// 用户标识
				customerNo: '',
				// 转账账户
				toCustomerNo: '',
				// 合约模板
				contractTemplate: {},
				// 详情类型
				exhibitionType: '',
				// 生成画布的图片
				posterUrl: '',
				// 二维码地址
				urlQrcode: ''
			}
		},
		// 获得产品编号
		onLoad({
			exhibitionType,
			serialNo,
			grade
		}) {
			console.log('exhibitionType', exhibitionType, 'serialNo', serialNo, 'grade', grade)
			this.exhibitionType = exhibitionType
			this.serialNo = serialNo
			// 取租户ID
			let tenantId = getApp().globalData.tenantId
			var grade = Number(grade)
			if (exhibitionType === 'NFT') {
				getMyNft({
					serialNo,
					type: '0'
				}).then(res => {
					if (res) {
						console.log(res)
						// 基本信息
						this.nftDetailsInfo = res.data
						// 主题配置信息
						this.contract = res.data.contract
						// 合约模板
						this.contractTemplate = res.data.contractTemplate
						// Mint 信息
						this.themeMint = res.data.themeMint
					}
				})
				return
			}
			// 身份详情
			getPositionDetails({
				tenantId,
				grade
			}).then(res => {
				if (res) {
					console.log("res", res)
					// 基本信息
					this.nftDetailsInfo = res.data
					// 合约模板
					this.contractTemplate = res.data.contractTemplate
				}
			})

		},
		onShow() {
			this.urlQrcode = window.location.href
		},
		created() {
			// 客户编号
			this.customerNo = uni.getStorageSync('customerNo')
		},
		computed: {
			handleTemplateType() {
				switch (this.templateType.type) {
					case 0:
						return 'ERC20';
					case 1:
						return 'ERC721';
					case 2:
						return 'ERC1155';
				}
			}
		},
		methods: {
			copyTxHash() {
				uni.setClipboardData({
					data: this.themeMint.txHash,
					success: function () {
						console.log('success');
					},
				});
			},
			copyContract() {
				uni.setClipboardData({
					data: this.contract.contract,
					success: function () {
						console.log('success');
					},
				});
			},
			copyMetadataUrl() {
				uni.setClipboardData({
					data: this.themeMint.metadataUrl,
					success: function () {
						console.log('success');
					},
				});
			},
			// 分享 打开模态框
			// 关闭模态框
			closeShareBox() {
				this.isShareBoxShow = false
			},
			// 持有者
			toNftSpace() {
				uni.navigateTo({
					url: "/pages/nft/nftSpace"
				})
			},
			// 转让
			toTransfer() {
				uni.navigateTo({
					url: "/pages/my/presented?serialNo=" + this.serialNo
				})
			},
			// 弹出框关闭
			closeTransferShow() {
				this.transferShow = false
			},
			// 确认转让
			confirmTransfer() {
				this.transferShow = false
				console.log(this.toCustomerNo)
				giveAway({
					// 赠送
					from: this.customerNo,
					// 接受
					to: this.toCustomerNo,
					// nft编号
					typeNo: this.serialNo,
					// 类型
					type: 0
				}).then(res => {
					if (res)
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '转让成功'
						});
				})
			},

			// 提示弹窗
			_showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},

			// 显示loading
			_showLoading(str) {
				this.posterUrl = '';
				uni.showLoading({
					title: str
				});
			},

			// 隐藏loading
			_hideLoading() {
				uni.hideLoading();
				// #ifdef H5
				this._showToast('长按保存图片');
				// #endif
			},
			// 分享 打开模态框
			toShare(e, ownerFun) {
				ownerFun.callMethod('_showLoading', '正在生成海报') // 生成图片的 loading 提示
				setTimeout(() => {
					const dom = document.getElementById('pagePoster') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						// 生成成功
						// html2canvas 生成成功的图片链接需要转成 base64位的url
						ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
						this.isShareBoxShow = true
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						ownerFun.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			},
			receiveRenderData(val) {
				this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
			},
		}
	}
</script>
<style lang="scss">
	.nft_container_bg {
		min-height: 100vh;
		background: $echo-nft-bg-color;

		.saveImage {
			width: 100%;
			height: 1200rpx;
		}

		.nft_detail {
			color: #fff;

			.display_card {
				padding-top: 60rpx;
				margin: 0 auto;

				// 展示的标题
				&_title {
					margin: 0 auto;
					padding-top: 40rpx;
					width: 50%;
					padding: 30rpx;
					text-align: center;
					background: $echo-nft-card-bg-color;
					border-radius: 40rpx;
					font-size: 28rpx;
				}

				// 展示的图
				&_product {
					width: 400rpx;
					height: 400rpx;
					border-radius: 50%;
					overflow: hidden;
					margin: 80rpx auto;
					transition: all 0.4s linear;

					image {
						width: 100%;
						height: 100%;
					}

					&:hover {
						border-radius: 0;
						transform: scale(1.2);
					}
				}

				// 展示台
				&_tai {
					width: 80%;
					height: 200rpx;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				// 价格
				&_sign {
					width: 240rpx;
					margin: 80rpx auto;
					text-align: center;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					border-radius: 6rpx;
					overflow: hidden;

					.sign_lael {
						width: 40%;
						background-color: $echo-main-color;
					}

					.sign_num {
						width: 60%;
						background-color: $echo-nft-card-bg-color;
						color: $echo-main-color;
					}
				}
			}

			&_content {
				padding: 0 20rpx;

				// 创造者
				.info_person {
					background-color: $echo-nft-card-bg-color;
					padding: 30rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-bottom: 30rpx;
					display: flex;
					justify-content: center;

					.holders,
					.owner {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.holders_photo,
						.owner_photo {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							overflow: hidden;
							margin: 0 30rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.owner {
						display: flex;
						justify-content: space-between;
					}
				}

				.info_basis,
				.info_approve_content {
					background-color: $echo-nft-card-bg-color;
					padding: 30rpx;
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					overflow: hidden;
					margin-bottom: 30rpx;
					.info_approve_contract {
						span {
							display: inline-block;
						}
						.info {
							width: 400rpx;
							/*1.强制不换行*/
							white-space: nowrap;
							/*2.溢出隐藏*/
							overflow: hidden;
							/*3.超出部分用省略号表示*/
							text-overflow: ellipsis;
						}
					}
					&>view {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
					}

					&>view:first-child {
						margin-bottom: 30rpx;
					}
				}
				// 认证
				.info_approve_content {
					padding-top: 0rpx;

					&>view {
						margin-bottom: 30rpx;
					}
				}

				// 产品
				.info_product {
					margin-bottom: 200rpx;

					&_content {
						padding: 0 30rpx 30rpx;
						background-color: $echo-nft-card-bg-color;
						font-size: 28rpx;
					}
				}
			}

			// 底部按钮
			.bottom_btn_card {
				position: fixed;
				border-radius: 20rpx;
				bottom: 40rpx;
				left: 50%;
				margin-left: -40%;
				width: 80%;
				box-sizing: border-box;
				margin-top: 30rpx;
				padding: 0 60rpx;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: $echo-nft-bg-color;
				font-size: 28rpx;

				&_price {
					font-size: 44rpx;
					color: $echo-main-color;
				}

				.bottom_btn {
					border-radius: 40rpx;
					width: 340rpx;
				}
			}

			// 底部分享按钮
			.buy_bar {
				padding: 60rpx 30rpx;
				box-sizing: border-box;
			}

		}

		// 勋章领取
		.exchange {
			width: 700rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 40rpx;
			box-sizing: border-box;

			&_btn {
				width: 200rpx;
				margin: 0 auto;
				margin-top: 40rpx;
			}
		}

		// 转让弹出
		.transfer {
			width: 700rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 40rpx;
			box-sizing: border-box;

			&_tips {
				color: #999;
				font-size: 26rpx;
				padding: 30rpx 0;
			}

			&_btn {
				width: 200rpx;
				margin: 0 auto;
			}
		}
	}
</style>
